<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/select.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a> <cite>评论管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<div class="layui-row">
			<form class="layui-form layui-col-md12 x-so layui-form-pane" id="commentForm">
				<div class="layui-input-inline">
					<label>用户别名：</label> <input type="text" name="userNumber"
						placeholder="请输入用户别名" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<label> 视频名称：</label> <input type="text" name="videoName"
						placeholder="请输入视频名称" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<label> 评论时间戳：</label>
					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" name="stratTime" class="layui-input"
								id="start_time" placeholder="开始时间(修改时间)">
						</div>
					</div>
					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" name="endTime" class="layui-input"
								id="end_time" placeholder="结束时间(修改时间)">
						</div>
					</div>
				</div>
				<a href="javascript:commentForm()" class="layui-btn"><i class="layui-icon"></i>查询</a>
			</form>
		</div>
		<table id="commentTable" lay-filter="test" style="margin-top: 20px;"></table>
	</div>
	<script type="text/javascript">
		layui.use('table', function() {
			var table = layui.table;
			var tableIns = table.render({
				id : 'commentTable',
				elem :'#commentTable', //指定原始表格元素选择器（推荐id选择器）
				url : "../VideoComment/pageBackstageVideoComment",
				page : true, // 是否开启分页;
				limits : [ 2, 4, 6 ], //每页数量可选
				limit : 4, // 默认是4
				cols : [ [ //标题栏
				{
					fixed : 'left',
					checkbox : true
				}, {
					field : 'commentId',
					title : 'ID',
					fixed : 'left',
					sort : true,
					width : 100
				}, {
					field : 'userInfo',
					title : '用户别名',
					width : 200,
					templet:'#userAlias'
				}, {
					field : 'videoInfo',
					title : '视频名称',
					width : 230,
					templet : '#videoInfo',
				}, {
					field : 'commentDetails',
					title : '评论详情',
					width : 400
				}, {
					field : 'commentTime',
					title : '评论时间',
					width : 180,
					templet:'#commentTime'
				} , {
					field : 'commentStatus',
					title : '评论状态',
					width : 100,
					templet:"#commentStatus"
				},{
					title:"操作",
					width : 70,
					templet: "#operate"
				} ] ]
			});
			
			window.commentForm = function() { // 条件搜索
				var param = {};
				var arr = $("#commentForm").serializeArray();
				$(arr).each(function(i, e) {
					if (e.value != '') {
						param[e.name] = e.value;
					}
				})
				console.log(param);
				tableIns.reload({
					method : "post",
					where : param,
					page : {
						curr : 1
					}
				});
			}
		});
		
		 /*用户-停用*/
	      function member_stop(obj,id){
	        layer.confirm('确认要'+$(obj).attr('title')+'吗?',function(index){
	              if($(obj).attr('title')=='停用'){
	                //发异步把用户状态进行更改
	                $(obj).attr('title','启动')
	                $(obj).find('i').html('&#xe62f;');
	                
	                $(obj).parents("td").prev().find('span').addClass('layui-btn-disabled').html('已停用');
	                layer.msg('已停用!',{icon: 4,time:1000});
	              }else{
	                $(obj).attr('title','停用')
	                $(obj).find('i').html('&#xe601;');

	                $(obj).parents("td").prev().find('span').removeClass('layui-btn-disabled').html('已启用');
	                layer.msg('已启用!',{icon: 1,time:1000});
	              }
	              $.ajax({
	            	  url:"../VideoComment/updateVideoComment?commentId="+id,
	            	  type:"text",
	              })
	          });
	      }
		
		function getCommentTime(value){
			return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
		}
	</script>
	
	<!-- 操作 -->
	<script type="text/html" id="operate">
	  {{#  if(d.commentStatus > 0){ }}
		<a onclick="member_stop(this,'{{d.commentId}}')" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i> 
 	 {{#  } else { }}
		<a onclick="member_stop(this,'{{d.commentId}}')" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i> 
 	 {{#  } }}
	</script>
	<!-- 评论状态 -->
	<script type="text/html" id="commentStatus">
	  {{#  if(d.commentStatus < 1){ }}
 	   	<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></td>
 	 {{#  } else { }}
 		 <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">已停用</span>
 	 {{#  } }}
	</script>
	
	<script type="text/html" id="userAlias">
		{{d.userInfo.userAlias}}
	</script>
	<script type="text/html" id="videoInfo">
		{{d.videoInfo.videoName}}
	</script>
	<script type="text/html" id="commentTime">
		{{getCommentTime(d.commentTime)}}
	</script>
	<script>
		layui.use([ 'laydate' ], function() {
			var $ = layui.$;
			var laydate = layui.laydate;
			var nowTime = new Date().valueOf();

			var start = laydate.render({
				elem : '#start_time',
				type : 'datetime',
				max : nowTime,
				btns : [ 'clear', 'confirm' ],
				done : function(value, date) {
					end.config.min = date;
					end.config.min.month = date.month - 1;
				}
			});
			var end = laydate.render({
				elem : '#end_time',
				type : 'datetime',
				max : nowTime,
				done : function(value, date) {
					if ($.trim(value) == '') {
						start.config.max = max;
						return;
					}
					start.config.max = date;
					start.config.max.month = date.month - 1;
				}
			});
		});
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>
</body>

</html>